/*  Author: Jansen Peña  */

/* Revisar! Deben haber modificaciones de estilos para la versión real */

/* _Inclusión Merge Fabio */
* {
	-webkitfade
	-touch-callout: none;
	-webkit-user-select: none;
}
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* Hay forma de normalizar estilos */
html {
	font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
/* Para probar en desktop */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	margin: 0;
	padding: 0;
}
nav {
	display: block;
}
/* FIN para probar en desktop */
html, body, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
	margin: 0;
	padding: 0;
}

/* Valores iniciales para iPhone Retina */
body {
	color: #20110d;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
}
a {
	color: #20110d;
}
a:focus {
	outline: thin dotted:;
}
a:active, a:hover {
	outline: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
img {
    border: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

/* Barras superior e inferior*/
.menu {
	position: fixed;
	z-index: 99;
}
.menu#topBar {
	background: url("../img/logo-silla.jpg") no-repeat center, url("../img/barraSup-bg.gif") repeat-x center;
	/*background-size: auto 100%;*/
	box-shadow: 0 1px 2px 0px #000;
	height: 75px; /*7.81%;*/
	/*max-height: 75*/
	left: 0;
	top: 0; /*40px; es el alto de la barra, pero no se debe tener en cuenta*/
	width: 100%;
}
.menu#topBar ul {
	display: block;
	position: relative;
	height: 100%;
}
.menu#topBar li, .menu#topBar a, .menu#bottomBar li, .menu#bottomBar a {
	display: block;
}
.menu#topBar a {
	width: 100%;
	height: 100%;
}
.menu#topBar #inicio, .menu#topBar #callMenu, .menu#topBar #actualizar, .menu#topBar #atras {
	background: transparent no-repeat center;
	/*background-size: contain;*/
	height: 70.6%; /*53px;*/
	position: absolute;
	top: 13.3%; /*10px;*/
	width: 72px;  /*11.25%;*/
}
.menu#topBar #inicio {
	background-image: url("../img/btn-home.jpg");
	right: 93px;  /*14.53%;*/
}
.menu#topBar #callMenu {
	background-image: url("../img/btn-menu.jpg");
	right: 11px;  /*1.71%;*/
}
.menu#topBar #actualizar {
	background-image: url("../img/btn-reload.jpg");
	left: 97px; /*15.15%;*/
}
.menu#topBar #atras {
	background-image: url("../img/btn-atras.jpg");
	/*background-size: contain;*/
	left: 14px; /*2.18%;*/
}
.menu#topBar li span {
	display: none;
}
.menu#topBar #mainMenu {
	background: #00a9fc;
	display: none;
	font-size: 1.850em; /*37px;*/
	height: auto;
	left: 0;
	position: fixed;
	text-align: center;
	text-transform: uppercase;
	top: 75px;
	width: 100%;
	z-index: 99;
}
.menu#topBar #mainMenu a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0.622em 0;
	height: auto;
}
.menu#topBar #mainMenu li {
	height: 90px; /*3.333em;*/
	vertical-align: middle;
}
#mainMenu li:nth-child(2), #mainMenu li:nth-child(6) {
	background: #00bdfb;
}
#mainMenu li:nth-child(3), #mainMenu li:nth-child(5) {
	background: #55d3fd;
}
#mainMenu li:nth-child(4) {
	background: #9fe4fc;
}
.menu#topBar #mainMenu li:nth-child(4) a {
	color: #00a9fc;
}
.menu#bottomBar {
	background: transparent url("../img/barraInf-bg.gif") repeat-x center;
	background-size: auto 100%;
	border-top: solid 1px #acacac;
	bottom: 0;
	height: 88px; /*9.16%;*/
	left: 0;
	width: 100%;
}
.menu#bottomBar a {
	background: rgba(255,255,255,0.15) url("../img/icon-live.png") no-repeat 11.4% center; /*13px center;*/
	background-size: auto 64.7%;
	border-radius: 4px;
	display: block;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.500em; /*30px;*/
	font-weight: bold;
	height: 2.267em;  /*77.27%; 68px / 52px;*/
	left: 3.59%; /*23px;*/
	line-height: 2.267em;
	/*padding: 16px 0 0 50px; */
	position: absolute;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	top: 0.333em; /*11px;*/
	width: 5.467em; /*114px;*/
}
.menu#bottomBar a span {
	display: block;
	padding: 0 1em 0 43.85%;
	position: static;
}

/* secciones  +++++++++++++++++++++++++++++++++++++++++++++++*/
.page {
	display: none;
	padding: 75px 0 89px 0;
	z-index: 10;
}
.page.active {
	display: block;
}

/* Feeds de Noticias ************************* */
.feed {
	display: block;
}
.feed a {
	text-decoration: none;
}
.feed h1 {
	background: #00acf9;
	clear: both;
	color: #fff;
	font-size: 1.550em; /*31px;*/
	/*margin: -1px 0;*/
	padding: 0.097em 0.613em 0.129em; /*3px 19px 4px;*/
}
.feed:after {
	content: "";
	display: block;
	clear: both;
}
.feed>li {
	display: block;
}
/*.feed>li:last-child {
	margin-bottom: 89px;
}*/
.feed .inner, .feed li.pauta {
	border: 1px solid #b7b9bd;
	position: relative;
}
.feed li.noti , .feed li.pauta {
	float: left;
}
.feed li.noti {
	position: relative;
	width: 50%;
	/*min-height: 300px;
	height: 15em; 300px;*/
	height: 15.750em; /*315px;*/
}
/* Revisar! */
.feed li.noti .foto, #detalle .foto {
	overflow: hidden;
	position: relative;
	display: block;
	z-index: 10;
}
.feed li.noti .foto img, #detalle .foto img {
	position: absolute;
	/*top: 50%;
	left: 50%;
	margin-top: -50%;
	margin-left: -50%;
	width: 100%;
	height: auto;*/
	height: 100%;
	width: auto;
}
.feed li.noti .inner {
	/*padding: 3em 1em 1em; /*60px 20px 20px;*/
	padding: 0 1em; /*0 20px*/
	height: 100%;
}
.feed li.noti h2, li.noti .noti-tags {
	font-size: 1.9em; /*38px;*/
}
.feed li.noti h2 {
	margin-top: 1.579em;
	cursor: pointer;
}
.feed li.noti h4 {
	color: #00acf9;
	font-size: 1.100em; /*22px;*/
	line-height: 1.455em;
}
.feed li.noti .noti-info h4 a {
	color: #00acf9;
}
.feed li.noti h4 span {
	display: none;
}
.feed li.principal {
	width: 100%;
	height: auto; 
}
.feed li.principal .inner {
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 1em 0.6em; /*20px 12px;*/
}
.feed li.principal .foto {
	height: 18.4em; /*368px;*/
}
.feed li.principal .noti-info {
	bottom:  1.034em; /*30px;*/
	color: #fff;
	font-size: 1.450em; /*29px;*/
	left: 0;
	padding: 0 1.034em; /*30px;*/
	position: absolute;
	width: auto;
	z-index: 76;
}
.feed li.principal h4 {
	font-size: 0.759em; /*22px;*/
}
.feed li.principal h2, li.principal .noti-tags {
	font-size: 1em; /*29px;*/
}
.feed li.principal .noti-info a {
	color: #fff;
}
li.principal .noti-stats {
	right: 1em; /*20px;*/
	top: 1.8em; /*36px;*/
}
.feed li.ancho {
	height: auto;
	min-height: 10em; /*200px;*/
	width: 100%;
}
.feed li.ancho .foto {
	height: 10.1em; /*202px;*/
	width: 15.5em; /*310px;*/
	float: left;
	margin: 2.350em 1em 0 0; /*47px 20px 0 0;*/
}
.feed li.ancho .inner {
	height: 100%;
	/*min-height: 300px;*/
	padding: 0.7em 0.55em 1em; /*14px 11px 20px;*/
}
.feed li.ancho .inner:after {
	content: "";
	display: block;
	clear: both;
}
.feed li.ancho h2 {
	margin-top: 0;
}

/* Atributos de noticia ************************/
li.ancho .noti-stats {
	left: 1.05em; /*21px;*/
}
.noti-tags li, .noti-stats li, .noti-hilos li, .noti-quien li {
	display: inline-block;
}
.noti-tags:before {
	content: "Tags: ";
}
.noti-hilos:before {
	content: "Hilos temáticos: ";
}
.noti-quien:before {
	content: "Quién es quién: ";
}
.noti-tags li:after, .noti-hilos li:after, .noti-quien li:after {
	content: ", ";
}
.noti-tags li:last-child:after, .noti-hilos li:last-child:after, .noti-quien li:last-child:after {
	content: ".";
}
.noti-stats {
	color: #fff;
	display: block;
	font-size: 1.050em; /*21px;*/
	height: 1.714em; /*36px;*/
	position: absolute;
	top: 0.667em; /*14px;*/
	width: auto;
	z-index: 76;
}
.noti-stats li {
	background: #ccc url("../img/icon-antiguedad.gif") no-repeat 0.667em center; /*14px center;*/
	background-size: auto 1.095em; 
	height: 1.429em; /*30px;*/
	padding: 0.286em 0.381em 0 2.381em; /*6px 8px 0 50px;*/
}
.noti-stats li:last-child {
	background: #afe4fb url("../img/icon-vistas.gif") no-repeat 0.381em center; /*8px center;*/
	background-size: auto 1.095em; 
	margin-left: 0.190em;/* 4px;*/
}
.noti-stats li span {
	display: none;
}
.feed li.pauta { 
	width: 100%; 
	border-left: none; 
	border-right: none;
	height: 140px;
	overflow: hidden;
}
.feed li.pauta:before {
	color: #fff;
	text-align: center;
	display: block;
	position: absolute;
	top: 35%;
	font-size: 40px;
	width: 100%;
}
.feed li.pauta img {
	width: 100%;
	height: auto;
}

/* Detalle Noticia  ///////////////////////////////////*/

#detalle {
	/*padding: 141px 16px 149px;*/
	padding-left: 0.800em; /*16px;*/
	padding-right: 0.800em; /*16px;*/
}
#detalle>*:last-child {
	margin-bottom: 60px;
}
#detalle .articulo {
	padding: 0.114em; /*4px;*/
	font-size: 1.750em; /*35px;*/
	line-height: 1em;
}
#detalle .articulo h1 {
	font-size: 0.857em;
	line-height: 1.033em;
	margin: 0.633em 0 0.200em;/*19px 0 8px*/
}
#detalle .articulo h2, #detalle .articulo h3 {
	font-size: 1em;
	margin: 0 0 0.5em;
	font-weight: bold;
}
#detalle .articulo h2:first-letter, #detalle .articulo h3:first-letter {
	text-transform: uppercase;
}
#detalle .articulo h4, 
/* _Inclusión Merge Fabio */ 
#detalle .articulo h5 {
	font-size: 0.600em; /*21px;*/
	line-height: 1.429em; /*30px;*/
	height: 1.429em; /*30px;*/
	margin: 0.095em 0 0.571em; /*2px 0 12px;*/
}
#detalle .articulo h4 a,
/* _Inclusión Merge Fabio */
#detalle .articulo h5 a {
	display: block;
	color: #fff;
	background: #00b2e7;
	width: 13.143em; /*276px;*/
	padding: 0 0.667em; /*14px;*/
	text-decoration: none;
}

/* _Inclusión Merge Fabio */
#detalle .articulo h5 a {
	width: 6.667em; /*140px;*/
}
#detalle .articulo h4 a span, 
/* _Inclusión Merge Fabio */
#detalle .articulo h5 a span {
	display: none;
}
#detalle .cuerpoArt a {
	color: #00ACF9;
	text-decoration: none; 
}
#detalle .noti-stats {
	display: inline-block;
	position: static;
	height: 1.333em; /*24px;*/
	font-size: 0.514em; /*18px;*/
	/*line-height: 1em;*/
}
#detalle .noti-stats li {
	padding: 0 0.444em 0.056em 2.778em; /*0 8px 1px 50px;/*
	height: 1.667em; /*30px;*/
	margin-top: 0.278em; /*5px;*/
}
#detalle .noti-tags {
	margin-top: 1.3em; /*26px;*/
}
#detalle .noti-tags a, 
#detalle .noti-tags li, 
#detalle .noti-hilos a, 
#detalle .noti-hilos li, 
#detalle .noti-quien a, 
#detalle .noti-quien li {
	color: #00acf9;
	text-decoration: none;
}
#detalle .noti-tags li:after, 
#detalle .noti-hilos li:after, 
#detalle .noti-quien li:after {
	color: #00acf9;
}
#detalle .articulo h4, 
#detalle .articulo h5, 
#detalle .noti-tags li,  
#detalle .noti-hilos li, 
#detalle .noti-quien li {
	display: inline-block;
}
#detalle .foto, #detalle #foto {
	/*height: 382px;*/
	margin: 0 0 1.5em 0; /*30px;*/
	padding: 0;
	width: 100%;
}
#detalle #foto td {
	padding: 0;
}
#detalle .foto img, #detalle #foto img {
	width: 100%;
	height: auto;
}
#detalle p {
	margin: 0 0 1em; 
}

/* Compartir Homes Historias y Querido Diario  ///////////////////////////////////*/
.compartir {
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	color: #00acf9;
	font-size: 1.450em; /*29px;*/
	margin-top: 0.828em; /*26px;*/
	padding: 0.414em 0.379em 0.448em 0.621em; /*12px 11px 13px 18px;*/
	text-align: right;
}
.compartir a {
	color: #00acf9;
	text-decoration: none;
}
.compartir li {
	display: inline-block;
	margin-left: 0.483em; /*14px;*/
}
.compartir li a {
	display: block;
}
.compartir li.orig {
	float: left;
	margin-left: 0;
}
.compartir li.twit a {
	background: url("../img/icon-twit.gif") no-repeat center;
	width: 1.241em; /*36px;*/
}
.compartir li.face a {
	background: url("../img/icon-face.gif") no-repeat center;
	width: 0.414em; /*12px;*/
}
.compartir li.mail a {
	background: url("../img/icon-mail.gif") no-repeat center;
	width: 1.069em; /*31px;*/
}
.compartir li.twit a,
.compartir li.face a, 
.compartir li.mail a {
	background-size: auto 100%;
	height: 0.862em; /*25px;*/
}
.compartir li a span {
	display: none;
}

/* LIVE  ///////////////////////////////////*/
#vivo {
	background: #f7f7f7;
	/*min-height: 80%;*/
}
#vivo h1 {
	background: #00b2e7;
	color: #fff;
	font-size: 1.150em;
	left: 3%;
	min-width: 49.3%;
	padding: 0 6.3%;
	position: absolute;
	text-decoration: none;
	top: 94px;
	z-index: 32;
}
#vivo .media {
	background: #f7f7f7;
	border: 1px solid #e3e3e4;
	box-shadow: 0 1px 2px 0px #868686;
	height: 15.500em; /* 310px es el alto nuevo  --- 492px;*/
	left: 0;
	position: fixed;
	top: 45px; /* posicionado para tapar la barra superior del video 95px;*/
	width: 100%;
	z-index: 31;
}
#vivo #twitterTLsNav {
	position: fixed;
	/*top: 28.8em; 576px;*/
	top: 17.50em; /*569px;*/
	width: 100%;
}
#vivo #twitterTLsNav ul {
	padding: 0 5%;
	display: block;
	padding-top: 1.350em;
	z-index: 30;
}
#vivo #twitterTLsNav li {
	display: inline-block;
	background: #a3a4a3;
	margin: 0 0.624%;
	width: 31.34%; /*31.94%;*/
}
#vivo #twitterTLsNav li.active {
	background: #00b2e7;
}
#vivo #twitterTLsNav h2 {
	color: #fff;
	cursor: pointer;
	font-size: 1.250em; /*35px;*/
	height: 1.114em; /*39px;*/
	margin: 0 4.34%;
}
#vivo #twitterTLs {
	/*font-size: 1.200em; 24px;
	line-height: 0.75em;*/
	font-size: 1em;
	line-height: 1em;
	position: fixed;
	top: 20.10em; /*635px;*/
	width: 100%;
	height: 11em; /*220px;*/
}
#vivo #twitterTLs .pesta {
	border-top: 4px solid #00b2e7;
	display: none;
	padding: 1.233em 1.167em;
	position: relative;
	overflow-y: auto;
	height: 18em; /*220px;*/
}
#vivo #twitterTLs .pesta.active {
	display: block;
}
#vivo #twitterTLs .pesta h2 {
	/*display: none;*/
	position: absolute;
	top: 2em;
	left: 40%;
	background: #ccc;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
#vivo #twitterTLs .pesta ul {
	display: block;
	list-style: none;
}
#vivo #twitterTLs .pesta li {
	margin-bottom: 1.250em; /*30px;*/
	display: block;
}
#vivo #twitterTLs .pesta li:after {
	content: "";
	display: block;
	clear: both;
}
#vivo #twitterTLs .pesta li img {
	float: left;
	margin-right: 0.833em;
	height: 3em; /*2.500em;*/
	width: 3em; /*2.500em;*/
}
#vivo #twitterTLs .pesta li h3 {
	display: inline;
}
#vivo #twitterTLs .pesta li a {
	color: #00a9fc;
}
#vivo #twitterTLs .pesta li p {
	display: inline;
}

@media only screen and (min-width : 700px) {
	.menu#topBar #mainMenu {
		font-size: 24px;
	}
	.menu#topBar #mainMenu a {
		/*padding: 0.622em 0;*/
	}
	.menu#topBar #mainMenu li {
		height: 60px;
	}

	.feed li.pauta { 
		height: 210px;
	}

}
/*
@media screen and (max-width: 500px), screen and (max-device-width: 500px) {
	body { font-size: 16px; }
	.menu#topBar {	height: 60px; }
	.menu#bottomBar { height: 70px; }
	.menu#topBar #mainMenu { top: 60px; }
	.menu#topBar #mainMenu li { height: 2.5em; }
	.page { padding: 60px 0 70px 0; }
	#vivo h1 { top: 75px; }
	#vivo .media { top: 60px; }
}

@media screen and (max-width: 360px), screen and (max-device-width: 360px) {
	body { font-size: 10px; }
	.menu#topBar {	height: 37px; }
	.menu#bottomBar { height: 44px; }
	.menu#topBar #mainMenu { top: 37px; }
	.menu#topBar #mainMenu li { height: 2.5em; }
	.page { padding: 37px 0 44px 0; }
	#vivo h1 { top: 47px; }
	#vivo .media { top: 37px; }
}

/* _Inclusión Merge Fabio */
.fade{
    	/*position: absolute; top:0px; left:0px; width:100%; height:100%;*/
        background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 70%, rgba( 0, 0, 0, 0 ) 100% );
        background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 70%, rgba( 0, 0, 0, 100 ) 100% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 70%, rgba( 0, 0, 0, 100 ) 100% );
        height: 100%;
		width: 100%;
    }


div#loading{
	background-color: #FFFFFF;
	background-image:url("../img/loading.gif");
	position: relative;
	top: 86px; 
	width: 100%;
	height: 1058px;
	z-index: 500;
	background-repeat: no-repeat;
	background-position:center;
}    